<template>
  <div class="goods-list">
    <!-- 用编程式导航实现路由的跳转 -->
    <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
        <img :src="item.img_url" alt="">
        <h3 class="title">{{item.title}} </h3>
        <div class="info">
          <p class="prise">
            <span class="now">￥{{item.sell_price}}</span>
            <span class="old">￥{{item.market_price}} </span>
          </p>
          <p class="sell">
            <span>热卖中</span>
            <span>剩余{{item.stock_quantity}} 件</span>
          </p>
        </div>
    </div>
    <mt-button size="large" type="danger" @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
export default {

  data () {
    return {
      pageindex:1,
      goodsList:[],
    }
  },

  methods: {
    getGoodsList(){
      this.$http.get("http://www.liulongbin.top:3005/api/getgoods?pageindex="+this.pageindex).then(result=>{
        console.log(result.body);
        
        if(result.body.status == 0){
            this.goodsList = this.goodsList.concat(result.body.message);
        }
      })
    },
    getMore(){
      this.pageindex++;
      this.getGoodsList();
    },
    goDetail(id){
      // 1. 最简单的
      // this.$router.push('/home/goodsinfo/'+ id);
      // 2.传递对象
      // this.$router.push({path:"/home/goodsinfo" + id});
      //3. 传递命名的路由
      this.$router.push({name:"goodsinfo", params:{id:id }});
    }
  },

  created () {
    this.getGoodsList();
  }
}
</script>

<style lang='less'>
.goods-list{
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  justify-content: space-between;
  p{
    margin: 0;
  }
  .goods-item{
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin: 3px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 293px;
    img{
      width: 100%;
    }
    .title{
      font-size: 14px;
    }
    .info{
      background-color: #eee;
      padding: 2px;
      .prise{
        .now{
          color: #e92322;
          font-weight:700;
          font-size: 16px; 
        }
        .old{
          text-decoration:line-through;
          margin-left: 10px;
        }
      }
      .sell{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
